<template>
	<!-- #ifndef MP -->
	<view class="uni-navbar">
		<view class="uni-navbar__content" :class="{ 'uni-navbar--fixed': fixed, 'uni-navbar--shadow': shadow, 'uni-navbar--border': border }" :style="{ background: backgroundColor }">
			<view :style="{ height: statusBarHeight, background: statusBarBackground }" class="hx-status-bar" v-if="statusBar"></view>
			<view :style="{ color: color, height: height }" class="uni-navbar__header uni-navbar__content_view">
				<!-- , 'line-height': height -->
				<view class="uni-navbar__header-btns uni-navbar__content_view" @click="onClickLeft" v-if="leftSlot" :style="{ color: color }">
					<view v-if="leftIcon.length || back" :class="back ? 'left_back' : ''" class="uni-navbar__content_view">
						<u-icon :name="back ? 'arrow-left' : leftIcon" :color="color" size="40"></u-icon>
					</view>
					<view v-if="title.length" class="uni-navbar__header-container-inner uni-navbar__content_view clamp" style="max-width: 540rpx;text-align: center;">{{ title }}</view>
				</view>
				<view :class="title.length ? 'uni-navbar__header-btns-right' : ''" class="uni-navbar__header-btns uni-navbar__content_view" @click="onClickRight" v-if="rightSlot">
					<!-- 优先显示图标 -->
					<block v-if="rightIcon.length || rightText.length">
						<view class="uni-navbar__content_view" v-if="rightIcon.length"><u-icon :name="rightIcon" :color="color" size="28"></u-icon></view>
						<view v-if="rightText.length" class="uni-navbar-btn-text uni-navbar__content_view">{{ rightText }}</view>
					</block>
					<block v-else><slot name="right" /></block>
				</view>
			</view>
		</view>
		<view v-if="placeholder" class="uni-navbar__placeholder">
			<view :style="{ height: statusBarHeight }" class="hx-status-bar" v-if="statusBar"></view>
			<view :style="{ height: height }"></view>
		</view>
	</view>
	<!-- #endif -->
</template>

<script>
// #ifndef MP
//获取系统状态栏高度
let statusBarHeight = '44px';
export default {
	name: 'uni-navbar',
	data() {
		return {
			statusBarHeight: statusBarHeight,
			placeholder: false
		};
	},
	props: {
		height: {
			type: String,
			default: '44px'
		},
		//导航栏占位符 显示（show），隐藏（hidden），自动（auto：如果头部为固定fiexd ，则显示占位符）
		barPlaceholder: {
			type: String,
			default: 'auto'
		},
		//返回上一页
		back: {
			type: [Boolean, String],
			default: true
		},
		//标题
		title: {
			type: String,
			default: ''
		},
		//是否开启左插槽
		leftSlot: {
			type: [Boolean, String],
			default: true
		},
		//是否开启右插槽
		rightSlot: {
			type: [Boolean, String],
			default: true
		},
		show: {
			type: [Boolean, String],
			default: false
		},

		//左边文字
		leftText: {
			type: String,
			default: ''
		},
		//右插槽文字
		rightText: {
			type: String,
			default: ''
		},
		//左插槽图标
		leftIcon: {
			type: String,
			default: ''
		},
		//右插槽图标
		rightIcon: {
			type: String,
			default: ''
		},
		//是否固定头
		fixed: {
			type: [Boolean, String],
			default: false
		},
		//文字颜色
		color: {
			type: [Array, String],
			default: '#fff'
		},
		//导航栏背景颜色
		backgroundColor: {
			type: String,
			default: '#e5231a'
		},
		//是否包含状态栏
		statusBar: {
			type: [Boolean, String],
			default: true
		},
		//状态栏背景颜色
		statusBarBackground: {
			type: String,
			default: '#e5231a'
		},
		//导航栏阴影
		shadow: {
			type: [String, Boolean],
			default: false
		},
		//导航栏边框
		border: {
			type: [String, Boolean],
			default: false
		},
		//跳至普通页面
		defaultBackUrl: {
			type: String,
			default: ''
		},
		//跳至tabber页面
		backTabbarUrl: {
			type: String,
			default: '/pages/index/index'
		}
	},
	created() {
		//是否添加占位符
		switch (this.barPlaceholder) {
			case 'show':
				this.placeholder = true;
				break;
			case 'hidden':
				this.placeholder = false;
				break;
			case 'auto':
				if (this.fixed) {
					this.placeholder = true;
				}
				break;
		}
	},
	methods: {
		onClickLeft() {
			if (this.back) {
				if (this.show) {
					this.$emit('click-show');
					return false;
				}
				if (getCurrentPages().length > 1) {
					uni.navigateBack();
				} else {
					// #ifdef H5
					history.back();
					// #endif
					// #ifndef H5
					if (this.defaultBackUrl) {
						uni.redirectTo({
							url: this.defaultBackUrl
						});
					} else {
						if (this.backTabbarUrl) {
							uni.reLaunch({
								url: this.backTabbarUrl
							});
						}
					}
					// #endif
				}
			} else {
				this.$emit('click-left');
			}
		},
		onClickRight() {
			this.$emit('click-right');
		}
	},
	destroyed() {}
};
// #endif
</script>

<style lang="scss">
/* #ifndef MP */
$nav-height: 44px;

.uni-navbar {
	position: relative;
	padding-top: 0;
	overflow: hidden;
	z-index: 999;

	&__content {
		display: block;
		position: relative;
		width: 100%;
		/*background-color: $uni-bg-color*/
		overflow: hidden;
		// border-bottom: 1rpx solid #e5e5e5;
		background-color: rgb(255, 255, 255);

		.navbgimg {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
			width: 100%;
		}

		.uni-navbar__content_view {
			// line-height: $nav-height;
			display: flex;
			align-items: center;
			margin-right: -30rpx;

			line-height: 40rpx;
		}

		.hx-status-bar {
			display: block;
			width: 100%;
			height: 40px;
			height: var(--status-bar-height);
			position: relative;
			z-index: 1;
		}
	}

	&__header {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: row;
		width: 100%;
		height: $nav-height;
		line-height: $nav-height;
		font-size: 18px;
		transition: color 0.5s ease 0s;
		overflow: hidden;

		&-btns {
			display: inline-flex;
			flex-wrap: nowrap;
			justify-content: center;
			flex-shrink: 0;
			min-width: 48px;
			font-size: 15px;
			text-align: center;
			box-sizing: border-box;
		}

		&-container {
			width: 100%;
			margin: 0 10rpx;

			&-inner {
				width: 100%;
				display: flex;
				justify-content: center;
				margin-left: 30rpx;
				font-size: 18px;
				font-weight: bold;

				// padding-right: 60rpx;
			}
		}
	}

	&__placeholder {
		&-view {
			height: $nav-height;
		}
	}

	&--fixed {
		position: fixed;
		top: 0;
		z-index: 998;
	}

	&--shadow {
		box-shadow: 0 2rpx 12rpx #ccc;
	}

	&--border:after {
		position: absolute;
		z-index: 3;
		bottom: 0;
		left: 0;
		right: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		background-color: #efefef;
	}
}

.left_back {
	padding-left: 12rpx;
	padding-right: 12rpx;
}
/* #endif */
</style>
